<template>
	<onez-view class="button" @mouseover.native="setStatus(1)" @mouseleave.native="setStatus(0)"
		@mousedown.native="setStatus(2)" @mouseup.native="setStatus(1)" @mouseout.native="setStatus(0)"
		:class="['button-' + type]" v-if="ready" :style="{ width: showWidth + 'px', height: showHeight + 'px' }"
		>
		<onez-view class="buttonBorder"
			:style="{ width: buttonWidth + 'px', height: buttonHeight + 'px', transform: 'scale(' + showWidth / buttonWidth + ',' + showHeight / buttonHeight + ')' }">
			<onez-view class="border" :style="'top:' + -index * buttonHeight + 'px'">
				<onez-node :resid="myResId"
					@init="getInfo"></onez-node>
			</onez-view>
			<onez-view class="text" :style="'line-height:' + buttonHeight + 'px'">
				{{ name || '' }}
				<slot></slot>
			</onez-view>
		</onez-view>
	</onez-view>
</template>

<script>
	import onezView from '../onez-view/onez-view.vue'
	import onezNode from '../onez-node/onez-node.vue'
	export default {
		name: 'onez-dialog',
		components: {
			onezView,
			onezNode
		},
		data() {
			return {
				index: 0,
				resHeight: 0,
				showWidth: 0,
				showHeight: 0,
				buttonWidth: 0,
				buttonHeight: 0,
				lineNum: 3,
				ready: false,
				myResId: 'btn1'
			};
		},
		props: {
			resid: {
				type: String,
				default: null
			},
			mode: {
				type: String,
				default: 'button'
			},
			type: {
				type: String,
				default: 'default'
			},
			name: {
				type: String,
				default: ''
			},
			checked: {
				type: Boolean,
				default: false
			},
			line: {
				type: Number,
				default: 3
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			}
		},
		watch: {
			checked() {
				this.index = this.checked ? 2 : 0;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			setStatus(status) {
				if (this.mode == 'switch') {
					return;
				}
				if (this.lineNum < status || this.lineNum <= 1) {
					return;
				}
				this.index = status;
			},
			getInfo(info) {
				console.log(info)
				this.resHeight = info.resHeight;
				this.lineNum = info.line || this.line;
				this.buttonHeight = this.resHeight / this.lineNum;
				this.buttonWidth = info.resWidth;
				var showWidth = this.buttonWidth;
				var showHeight = this.buttonHeight;
				if (!this.resid) {
					showWidth = 83;
					showHeight = 33;
				}
				if (this.width > 0) {
					showWidth = this.width;
				}
				if (this.height > 0) {
					showHeight = this.height;
				}
				this.showWidth = showWidth;
				this.showHeight = showHeight;
				this.$game.wait(this);
			},
			async init() {
				if (this.resid) {
					this.myResId = this.resid;
				} else {
					if (this.type == 'warning') {
						this.myResId = 'btn1';
					} else if (this.type == 'danger') {
						this.myResId = 'btn1';
					} else {
						this.myResId = 'btn1';
					}
				}
				if (this.mode == 'switch') {
					this.index = this.checked ? 2 : 0;
				}
				this.ready = true;
			}
		}
	};
</script>

<style scoped>
	.button {
		pointer-events: all !important;
		cursor: pointer;
		overflow: hidden;
		display: inline-block;
		position: relative;
	}

	.button * {
		pointer-events: none;
	}

	.buttonBorder {
		position: absolute;
		left: 0;
		top: 0;
		transform-origin: 0 0;
		font-size: 32px;
		display: block;
	}

	.text {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		text-align: center;
	}

	.border {
		position: relative;
		border: 0;
		display: block;
	}
</style>